<template>
    <div id="records">
        <div class="page-title">售出记录</div>
        <el-alert
                title="服务态度决定销量！"
                show-icon
                type="info"></el-alert>
        <div class="container padder">
            <div class="filter">
                <el-form :inline="true">
                    <el-form-item label="">
                        <el-date-picker
                                v-model="searchForm.time"
                                type="daterange"
                                start-placeholder="开始日期"
                                range-separator="至"
                                end-placeholder="结束日期"
                                value-format="timestamp"
                                placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="">
                        <el-select
                                v-model="searchForm.da_leimu_id"
                                type="date"

                                placeholder="选择类目">
                            <el-option v-for="item in $store.state.indexTypes.da_fenlei_data"
                                       :key="item.Id"
                                       :label="item.fenlei_mingcheng"
                                       :value="item.Id"

                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="">
                        <el-input placeholder="请输入关键词" v-model="searchForm.shangping_mingcheng"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-input placeholder="请输入订单号" v-model="searchForm.ddh"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="getList" :loading="loading">搜索</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="m-t">
                <el-table
                        ref="multipleTable"
                        :data="tableData"
                        v-loading="loading"
                        tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="tableSelectionHandle">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            prop="ddh"
                            label="订单号"
                            width="260">
                    </el-table-column>
                    <el-table-column
                            prop="create_time"
                            label="出售时间"
                            width="260">
                    </el-table-column>
                    <el-table-column
                            prop="shangping_mingcheng"
                            label="商品名称"
                            width="250"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="kami_xinxi"
                            label="卡密信息"
                            show-overflow-tooltip>
                        <template v-slot="scope">
                            {{scope.row.kami_xinxi}}
                            <el-button type="text" @click="$util.copy()" :data-clipboard-text="scope.row.kami_xinxi"
                                       class="tag-read">复制
                            </el-button>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="maijia_liuyan"
                            label="买家留言"
                            width="120"
                            show-overflow-tooltip>
                        <template v-slot="scope">
                            <el-button type="text" v-if="scope.row.maijia_liuyan" @click="liuyan(scope.$index)">查看
                            </el-button>
                            <span v-else>无</span>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination :total="total" :options="searchForm" @change="getList"></pagination>
            </div>
            <el-dialog
                    title="买家留言"
                    :visible.sync="dialogVisible"
                    width="30%"
            >
                {{liuyanContent}}
                <span slot="footer" class="dialog-footer">
                   <!-- <el-button @click="dialogVisible = false">取 消</el-button>-->
                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import mixins from '../../mixin'

    export default {
        name: 'records',
        components: {},
        mixins: [mixins],
        data() {
            return {
                searchForm: {
                    da_leimu_id: '',
                    page: 1,
                    ddh: '',
                    shangping_mingcheng: '',
                    time: ''
                },
                total: 0,
                loading: false,
                dialogVisible: false,
                tableData: [],
                liuyanContent: ''
            }
        },
        computed: {},
        methods: {
            liuyan(index) {
                this.dialogVisible = true;
                this.liuyanContent = this.tableData[index].maijia_liuyan;


            },
            //选择表格项
            tableSelectionHandle(val) {
            },
            //获取列表
            getList() {
                this.loading = true;
                this.$axios.post(`/api/shanghu/get_i_shouchu_baobei`, this.searchForm)
                    .then(res => {
                        if (res.code === `200`) {
                            this.tableData = res.data.dingdan_data;
                            this.total = res.data.shuliang;
                        }
                    }).finally(() => {
                    this.loading = false;
                })
            }
        },
        mounted() {
            this.getList();
        },
    }
</script>

<style lang="less" scoped>
    #records {

    }
</style>
